import React from 'react';
import { Table } from 'antd';
import type { TableProps } from 'antd';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import './customComponents.css';

interface CustomTableProps<T> extends TableProps<T> {
  className?: string;
}

const CustomTable = <T extends object>({ 
  className = '',
  ...props 
}: CustomTableProps<T>) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // 自定义表格样式
  const customStyle: React.CSSProperties = {
    background: theme.cardBackground,
    borderRadius: '8px',
    overflow: 'hidden',
    border: `1px solid ${theme.cardBorder}`,
    // 根据主题模式调整阴影效果
    boxShadow: mode === 'dark' 
      ? '0 4px 12px rgba(0, 0, 0, 0.3)'  // 深色主题下使用较柔和的阴影
      : '0 4px 12px rgba(0, 0, 0, 0.1)', // 浅色主题下使用明显阴影
  };

  // 处理表格头部样式
  const customHeaderStyle: React.CSSProperties = {
    background: mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.02)',
    color: theme.textPrimary,
    fontWeight: 'bold',
    // 添加底部边框以增强视觉分隔
    borderBottom: `1px solid ${theme.cardBorder}`,
  };

  // 合并样式
  const mergedStyle = {
    ...customStyle,
    ...props.style,
  };

  // 自定义分页器样式
  const customPaginationStyle: React.CSSProperties = {
    background: mode === 'dark' ? 'rgba(30, 30, 30, 0.9)' : theme.cardBackground,
    color: theme.textPrimary,
    borderTop: `1px solid ${theme.cardBorder}`,
    // 根据主题模式调整分页器阴影
    boxShadow: mode === 'dark' 
      ? '0 -2px 8px rgba(0, 0, 0, 0.2)'  // 深色主题下使用较柔和的顶部阴影
      : '0 -2px 8px rgba(0, 0, 0, 0.05)', // 浅色主题下使用明显阴影
  };

  // 表格行的悬停效果
  const getRowStyle = (record: T, index: number = 0) => {
    const baseStyle = {
      background: theme.cardBackground,
      color: theme.textPrimary,
      transition: 'background 0.2s ease',
    };
    
    // 奇数行添加轻微背景色变化
    if (index % 2 === 1) {
      return {
        ...baseStyle,
        background: mode === 'dark' 
          ? 'rgba(255, 255, 255, 0.03)'  // 深色主题下轻微亮色
          : 'rgba(0, 0, 0, 0.01)',       // 浅色主题下轻微灰色
      };
    }
    
    return baseStyle;
  };

  return (
    <div 
      className={`custom-table ${className}`}
      style={mergedStyle}
    >
      <Table
        {...props}
        onHeaderRow={(columns, index) => {
          return {
            style: customHeaderStyle,
          };
        }}
        onRow={(record, index) => {
          const rowIndex = index !== undefined ? index : 0;
          return {
            style: getRowStyle(record, rowIndex),
            onMouseEnter: (e) => {
              e.currentTarget.style.background = mode === 'dark' 
                ? 'rgba(97, 220, 163, 0.15)'   // 深色主题下使用主题色的半透明，增加不透明度
                : 'rgba(24, 144, 255, 0.1)';  // 浅色主题下使用主题色的半透明
            },
            onMouseLeave: (e) => {
              // 恢复原始背景色
              Object.assign(e.currentTarget.style, getRowStyle(record, rowIndex));
            },
          };
        }}
        pagination={
          props.pagination !== false
            ? {
                ...props.pagination,
                style: customPaginationStyle,
                showSizeChanger: true,
                showQuickJumper: true,
                // 在深色主题下优化分页器文本颜色
                itemRender: (page, type, originalElement) => {
                  if (mode === 'dark' && typeof originalElement === 'object' && originalElement !== null) {
                    return React.cloneElement(originalElement as React.ReactElement, {
                      // 移除 style 属性，使用 className 或其他方式设置样式
                    });
                  }
                  return originalElement;
                }
              }
            : false
        }
        locale={{
          ...props.locale,
          emptyText: props.locale?.emptyText || (
            <div style={{ 
              padding: '40px', 
              textAlign: 'center', 
              color: theme.textSecondary 
            }}>
              <div style={{ fontSize: '48px', marginBottom: '16px', opacity: 0.5 }}>
                📋
              </div>
              <p>暂无数据</p>
            </div>
          ),
        }}
        // 确保表格内容背景与主题一致
        style={{
          background: 'transparent',
        }}
      />
    </div>
  );
};

export default CustomTable;